<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.sql.*" %>
<%@ page import="com.data.ConnData" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题目列表</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>


    <style>
        /* 整体页面布局 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
        }

        /* 表格样式 */
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 30px auto; /* 增加上下外边距，使其在垂直方向更协调 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果，增强立体感 */
            border-radius: 10px; /* 表格添加圆角 */
        }

        th, td {
            border: 1px solid #ddd;
            text-align: left;
            padding: 12px; /* 适当增加内边距，内容显示更宽松 */
            font-size: 14px; /* 统一文字大小 */
        }

        th {
            background-color: #f2f2f2;
            color: #333; /* 表头文字颜色设为深灰色，更清晰 */
            font-weight: bold; /* 表头文字加粗 */
        }

        /* 修改按钮样式 */
        .modify-btn {
            background-color: #FFC107;
            color: white;
            padding: 8px 15px; /* 适当增加按钮内边距 */
            border: none;
            border-radius: 5px; /* 增大按钮圆角半径 */
            cursor: pointer;
            transition: background-color 0.3s ease; /* 添加背景色过渡效果 */
            margin-right: 10px; /* 按钮之间增加间距 */
        }

        .modify-btn:hover {
            background-color: #e0a800; /* 鼠标悬停时背景色变化 */
        }

        /* 删除按钮样式 */
        .delete-btn {
            background-color: #DC3545;
            color: white;
            padding: 8px 15px; /* 适当增加按钮内边距 */
            border: none;
            border-radius: 5px; /* 增大按钮圆角半径 */
            cursor: pointer;
            transition: background-color 0.3s ease; /* 添加背景色过渡效果 */
        }

        .delete-btn:hover {
            background-color: #c82333; /* 鼠标悬停时背景色变化 */
        }

    </style>
    <script>
        $(document).ready(function () {
            // 为修改按钮添加点击事件，跳转到题目修改详情页面，并传递题目ID作为参数
            $(document).on('click', '.modify-btn', function (e) {
                e.preventDefault();
                var questionId = $(this).data('question-id');
                window.location.href = "question_modify_detail.jsp?question_id=" + questionId;
            });

            // 为删除按钮添加点击事件，执行删除操作并给出提示
            $(document).on('click', '.delete-btn', function (e) {
                e.preventDefault();
                var questionId = $(this).data('question-id');
                if (confirm("确定要删除该题目吗？此操作不可恢复！")) {
                    window.location.href = "delete_question.jsp?question_id=" + questionId;
                }
            });
        });
    </script>
</head>

<body>
<!-- 导航栏 -->
<ul class="nav nav-pills" style="padding-top: 20px">
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link active" href="admin.jsp">管理</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="create_question.jsp">创建</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="question_modify_detail.jsp">修改</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: grey" href="../index.jsp">退出</a>
    </li>
</ul>
<hr>

<%
    request.setCharacterEncoding("utf-8");

    ConnData objdata = new ConnData();
    Connection connection = null;
    PreparedStatement psmt = null;
    ResultSet resultSet = null;
    try {
        connection = objdata.getConn();
        String sql = "SELECT question_id, question_name FROM question_table";
        psmt = objdata.getPsmt(sql);
        resultSet = psmt.executeQuery();
%>
<table>
    <tr>
        <th>题目 ID</th>
        <th>题目名称</th>
        <th>操作</th>
    </tr>
    <%
        while (resultSet.next()) {
            String questionId = resultSet.getString("question_id");
            String questionName = resultSet.getString("question_name");
    %>
    <tr>
        <td><%=questionId%></td>
        <td><%=questionName%></td>
        <td>
            <button class="modify-btn" data-question-id="<%=questionId%>">修改</button>
            <button class="delete-btn" data-question-id="<%=questionId%>">删除</button>
        </td>
    </tr>
    <%
        }
    %>
</table>
<%
} catch (SQLException e) {
    e.printStackTrace();
%>
<p>数据库操作出现错误，请稍后再试！</p>
<%
    } finally {
        if (resultSet!= null) {
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (psmt!= null) {
            try {
                psmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (connection!= null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
%>
</body>

</html>